<template>
    <div class="future-box">
        <div class="content">
            <div class="dh">扎实掌握JavaScript的知识</div>
            <div class="dh">熟练掌握ThingJs</div>
            <div class="dh">能够独立开发地球项目</div>
            <div class="dh">代码越来越严谨</div>
        </div>
    </div>
</template>

<script>
// import '../../index.js'
export default {
}
</script>

<style lang="less" scoped>
.future-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10vh;
    .content {
        width: 80%;
        background: rgba(100, 148, 237, 0.822);
        padding: 4vh;
        display: flex;
        justify-content: space-around;
        .dh {
            flex: 1;
            height: 100%;
            text-align: center;
            padding: 3vh;
            margin: 0 0.5vw;
            border-radius: 1vh;
            box-shadow: 0 0.2vh 0.7vh #faf8f8;
            // box-shadow: 0 1px 8px #727272;
            &:hover {
                transition: all 1s;
                background: white;
                color: cornflowerblue;
                animation: mymove 1s ease-out 0.1s 1;
            }
        }
    }
    .experience {
    //   background: rgb(148, 92, 76) url(./assets/bg.png);

      .content {
        position: absolute;
        top: 15vh;
        left: 0;
        right: 0;
        perspective: 3000px;

        .slider {
          width: 80vw;
          height: 55vh;
          background: #f2f4f5;
          margin: 0 auto;
          padding: 0 5vw;
          border-radius: 10px;
          color: #000;
          transition: transform 0.3s linear;
          overflow: hidden;
          box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
          border: 1px solid #eee;
          display: flex;
          justify-content: center;

          &-container {
            transition: opacity 0.3s;

            .img {
              background: center center no-repeat;
              background-size: contain;
              width: 400px;
              height: 100px;
              margin: 50px auto 0;
            }

            h4 {
              color: #945c4c;
              font-size: 32px;
              text-align: center;
              margin-bottom: 20px;
            }

            .-time {
              color: #af7464;
              font-size: 26px;
            }

            .-post {
              color: #9e6351;
              font-size: 26px;
              margin: 0 auto 50px;
              text-align: center;
            }

            .-tech {
              color: #9e6351;
              font-size: 14px;
            }

            .-list {
              .exp-item {
                font-size: 24px;
                line-height: 32px;
                margin: 12px 0;
                position: relative;

                &::before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: -3vw;
                  width: 10px;
                  height: 10px;
                  -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
                  border-radius: 50%;
                  background-color: #af7464;
                }
              }
            }
          }
        }

        .shout-cut {
          width: 50vw;
          margin: 0 auto;
          padding-top: 15vh;

          ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 101;

            li {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background-color: #623c32;
              cursor: pointer;
              transition: background-color 0.3s linear;
              position: relative;

              &::before {
                content: '';
                position: absolute;
                top: -30px;
                right: -30px;
                left: -30px;
                bottom: -30px;
              }
            }

            .-selected {
              background-color: #af7164;
            }
          }
        }
      }
    }
}
@keyframes mymove {
    50% { color: tomato; font-size: 1.5vh;border-radius: 1vh;}
    100% { color: cornflowerblue; font-size: 2.5vh; border-radius: 2vh;}
  }
</style>
